<template>
  <div class="about">
    <div class="container">
      <div class="row">
      <div class="col-md-5 bgc-big">
  <img src="../../public/img/a.jpg" class="card-img-top" alt="...">

   
      </div>
      <!-- 右边布局 -->
      <div class="col-md-6 right_font">
        <button class="btn_1">❤</button>
        <div class="xinxin"><p>★★★★☆<span>4星</span></p></div>
       <div class="title_wrap clear_fix">
          <div class="clear_fix">
            <h5 class="title f_left">
              <span>雪域燕麦芝士·轻享</span>
              <!---->
              <p>Curabitur non nulla sit amet nisl tempus convallis qui aclectus。 Curabitur non nulla sit amet nisl tempus convallis qui aclectus。</p>
            </h5>
            <div class="price_wrap f_right">
              <p class="new_price">¥<span>680</span></p>
              <!---->
              <!---->
              <!---->
            </div>
          </div>
          <div class="taste_left">鲜乳芝士蛋糕</div>
          <!---->
          <a href="" class="aha_entrance">
            <img src="//newimgcdn.lapetit.cn/web/images/aha/aha_link.png?2019112001" alt=""/>
          </a>
          <hr>
          
          <div class="you">
            <button class="btn_2"> <router-link to="/gouwuche"  href="#">立即购买</router-link></button>&nbsp;
                                <span class="span_aa" v-on:click="del()">
                                    -
                                </span>
                                <input type="text" name="zjia" id="txt" @blur="zhenze()" v-model="val_ue">
                                <span class="span_aa " v-on:click="add()">
                                  +
                                </span>
                            </div>
                        <div class="cheng_fen">
                          <h5>分类&nbsp;：&nbsp;<span> &nbsp;    芝士蛋糕</span></h5>  
                        </div>
                        <div class="cheng_fen">
                          <h5>标签&nbsp;：&nbsp;<span> &nbsp;     奶油 奶酪</span></h5>  
                        </div>
                        <div class="cheng_fen">
                          <h5>SKU&nbsp;：&nbsp;<span> &nbsp;     不 适 用</span></h5>  
                        </div>
                          <div class="leng_d">
 <span>❄</span>    
 <span class="zzz">保鲜条件：0-4℃冷藏，5℃食用最佳</span>

  </div>
          <!---->
        </div>
      </div>
<br>
</div>

    </div>
    
    <div class="container">
<hr>
    </div>
<!-- 介绍 -->
<div class="container">
<img src="../../public/img/介绍.jpg" alt="">
<img src="../../public/img/dibu2.jpg" alt="">
<img src="../../public/img/dibu3.jpg" alt="">
</div>
 
  </div>
</template> 
<style lang="less">
.bgc-big img {
  width: 100%;
  height: 400px;
  margin-top: 6px;
}
.new_price,.taste_left{
  font-size: 16px;
  color:#816b4e;
}
.aha_entrance img{
  width: 445px;
}
.right_font .btn_1{
  margin-top: 7px;
  background-color: #fff;
  border: 1px solid #eee;
  color: pink;
}
.right_font .btn_2{
  width: 100px;
  height: 48px;
  font-size: 16px;
  background-color: #634832;
  border: 1px solid #eee;
  color: rgb(255, 255, 255);
  padding-top:5px;
  margin-right: 15px;
  position: relative;
  top: -6px;
}
.btn_2 a{
  color: #fff;
  text-decoration: none;
}
.right_font .xinxin p{
  background-color: #fff;
  color: #816b4e;
   font-size: 20px;
}
.right_font .xinxin span{
  font-size: 16px;
  background-color: #fff;
  color: #c58181;
  margin: -2px 0 0 5px;
}
.f_left span{
   font-size: 16px;
  
  color:#816b4e;
}
.f_left p{
  margin-top: 7px;
   font-size: 16px;
  
  color: #816b4e;
}
.you{
  padding-left: 3px;
}
.you span{
    height: 100%;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    width: 40px;
    height: 49px;
    border: 1px solid #F0F2F3;
    background-color: #fff;
    transition: 0.3s;
    
}
.you input{
  
    background-color: #fff;
    outline: none;
    width: 50px;
 height: 49px;
    text-align: center;   
    border: 1px solid #F0F2F3;
   
}
.cheng_fen h5{
  font-weight: bold;
  margin-top: 13px;
  font-size: 16px;
}
.cheng_fen h5 span{
  margin-top: 10px;
  margin-left: 20px;
  color:#ac8585;
}
.leng_d{
   font-size: 24px;
  color: rgb(113, 238, 238);
}
.zzz{
  margin:-10px 0 0 20px;
  font-size: 14px;
  color:#665e5e;
}
.footer_xx {
  margin-top: 80px;
  text-align: center;
   background-color: #855648;
}
</style>
<script>
export default {
  data(){
      return{
        val_ue:1
      }
  },
  methods:{
      del:function(){
          this.val_ue--
       },
      add(){
        this.val_ue++
      },
     zhenze(){
       console.log(this.val_ue);
        // this.val_ue=this.val_ue.replace(/^\d*$/)   
     //replace(/[^a-z\d]/ig, 
     }
  }
}
 $(".span_aa").click(function(){
  console.log(123);
})

</script>
